<template>
  <div>
    <el-menu-item :index="huige.routerPath"
                  v-if="!huige.children || huige.children.length==0">
      <e-icon :icon-name="huige.menuIcon"/>
      <span slot="title" style="margin-left: 10px">{{ huige.menuTitle }}</span>
    </el-menu-item>

    <el-submenu :index="huige.routerPath"
                v-if="huige.children && huige.children.length>0">
      <template slot="title">
        <e-icon :icon-name="huige.menuIcon"/>
        <span>{{ huige.menuTitle }}</span>
      </template>

      <huigeitem v-for="(item,index) in huige.children" :key="index" :huige="item"/>
    </el-submenu>

  </div>

</template>

<script>
import {EIcon} from 'e-icon-picker';

export default {
  components: {EIcon},
  name: "huigeitem",
  props: ['huige']
}
</script>

<style scoped>
@import '~e-icon-picker/lib/index.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~element-ui/lib/theme-chalk/icon.css';
</style>
